<template>
  <div class="video-container">
    <!-- 当视频正在加载时，显示加载GIF -->
    <img v-show="isLoading" :src="loadingGifSrc" class="loading-icon" alt="Loading..." />
    
    <!-- 视频元素 -->
    <video
      v-show="!isLoading"
      ref="videoPlayer"
      controls
      @waiting="handleLoading(true)"
      @canplay="handleLoading(false)"
      @playing="handleLoading(false)"
      @ended="handleLoading(false)"
      preload="auto"
    >
      <source :src="actualVideoSrc" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true, // 初始状态为加载中
      loadingGifSrc: 'https://icons8.com/preloaders/preloaders/1474/Walk.gif', // 加载GIF的地址
      actualVideoSrc: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4' // 实际视频地址
    };
  },
  methods: {
    handleLoading(state) {
      console.log('xxx', ) 
      this.isLoading = state; // 更新加载状态
    }
  }
};
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
video {
  width: 100%;
  height: auto;
}
.loading-icon {
  width: 10%; /* 根据需要设置加载图标的宽度 */
  height: auto; /* 保持图标的纵横比 */
  display: block; /* 使其成为块级元素，避免底部间隙 */
}
</style>
